.cursor-wrapper {
    position: relative;
    width: 100%
}

.cursor-wrapper--active .cursor-left,
.cursor-wrapper--active .cursor-right,
.cursor-wrapper--active .cursor-zoom {
    cursor: none
}

@media (max-width:1023.98px) {
    .cursor-wrapper--active .cursor-left,
    .cursor-wrapper--active .cursor-right,
    .cursor-wrapper--active .cursor-zoom {
        cursor: default
    }
}

.cursor {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    color: #fff;
    height: 2.1875em;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: scale(1) translate(50%, -50%);
    transition: transform .6s, opacity .3s ease;
    width: 2.1875em;
    will-change: transform, opacity;
    z-index: 99
}

.cursor--clicked {
    transform: scale(.75) translate(50%, -50%)
}

.cursor--visible {
    opacity: 1
}

.cursor--disabled {
    opacity: .7
}

@media (max-width:767.98px) {
    .cursor {
        display: none
    }
}